import Evt from './event'

export default class Dom extends Evt {
  template = '';
  listTemp = '';
  constructor(list) {
    super(list);
    this.init();
    this.initList();
  }
  init() {
    this.template = '';
    this.list.forEach((item, index) => 
      this.template +=`
        <div class="w-full h-full absolute top-0 left-0 transform rotate-${22.5 + (45 * index)}">
            <div class="w-6.25 h-7.82 flex flex-col my-8 mx-auto text-white text-xl text-center justify-center items-center">
              <div>${item.title}</div>
              <img class="w-15 h-auto max-w-15 max-h-15 mt-2.5 ${ !item.img && 'hidden'}" src="${item.img}" alt="${item.title}">
            </div>
          </div>
        `
      );
  }

  initList() {
    this.listTemp = '';
    this.list.forEach((item, index) => {
      if (index <= 0) {
        this.listTemp = `
        <div class="w-full my-2 relative h-11 flex justify-center items-center">
          <b class="font-bold text-center">#</b>
          <p class="text-base text-center font-semibold w-1/3 py-2 px-4">项目</p>
          <p class="text-base font-semibold w-1/6 m-2.5 py-2 px-4 float-right">概率值</p>
          <p class="text-base font-semibold w-1/6 m-2.5 py-2 px-4 float-right">概率比</p>
        </div>
      `
      }
    this.listTemp += `
        <div data-id="${index}" class="w-full my-2 relative h-11 flex justify-center items-center">
          <span class="mr-10">${index+1}</span>
          <input data-name="title" value="${item.title}" class="sub-input-item appearance-none border border-transparent w-15r py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-md rounded-lg text-base focus:outline-none focus:border-green-500" type="text">
          <input data-name="lucky" value="${item.p}" class="sub-input-item appearance-none border border-transparent w-1/6 m-2.5 py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-md rounded-lg text-base focus:outline-none focus:border-green-500" type="text">
          <span class="min-w-15 bg-white py-2 px-4 rounded-lg text-base">${ item.lucky?.toFixed(1) || '0' }'%</span>
        </div>
        `;
        if (index === this.list.length - 1) {
          this.listTemp += `<button class="sub-btn-item float-right bg-purple-600 text-white text-base font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="button">确定</button>`
        };
      });
  }

  rendom(el) {
    if (this.listTemp) {
      this.template = '';
      this.init();
    }
    el.innerHTML = this.template;
  }

  rendomList(el) {
    if (this.listTemp) {
      this.listTemp = '';
      this.initList();
    }
    el.innerHTML = this.listTemp;
  }

}